<template>
	<fullscreen>
		<div class="displayPage">
			<!-- 展示页工具栏 -->
			<div class="displayPage-toolbar">
				<Toolbar />
			</div>
			<div class="df">
				<!-- 展示页菜单栏 -->
				<div class="displayPage-menu">
					<Menu />
				</div>
				<!-- 中间画布 -->
				<div class="displayPage-canvas">
					<Canvas />
				</div>
			</div>
		</div>
	</fullscreen>
</template>

<script>
import Toolbar from './toolbar';
import Menu from './menu';
import Canvas from './canvas';
import { userLogin } from '@/utils/api';
export default {
	name: 'DisplayPage',
	components: {
		Toolbar /* 工具栏 */,
		Menu /* 菜单栏 */,
		Canvas /* 画布 */
	},
	data() {
		return {};
	},
	created() {
		this.init();
	},
	methods: {
		// 初始化
		async init() {
			const res = await userLogin();

			$xy.set('userId', res.data.userId, 0);
		}
	}
};
</script>

<style lang="scss">
.displayPage {
	font-size: 14px;
	min-width: 1111px;

	.displayPage-toolbar {
		height: 40px;
	}

	.displayPage-menu {
		z-index: 99;
		width: 58px;
		min-width: 46px;
		height: calc(100vh - 40px);
		overflow-y: auto;
		@include xy-scroll;
	}

	.displayPage-canvas {
		flex: 1;
		height: calc(100vh - 40px);
	}
}
</style>
